function initSwitchTab() {
    // 1. 先获取到相关的元素(标签页的按钮, 会话列表, 好友列表)
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    // querySelectorAll 可以同时选中多个元素. 得到的结果是个数组
    // [0] 就是会话列表
    // [1] 就是好友列表
    let lists = document.querySelectorAll('.list');
    // 2. 针对标签页按钮, 注册点击事件. 
    //    如果是点击 会话标签按钮, 就把会话标签按钮的背景图片进行设置. 
    //    同时把会话列表显示出来, 把好友列表隐藏
    //    如果是点击 好友标签按钮, 就把好友标签按钮的背景图片进行设置. 
    //    同时把好友列表显示出来, 把会话列表进行隐藏
    tabSession.onclick = function() {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/会话.png)';
        tabFriend.style.backgroundImage = 'url(img/好友2.png)';
        // b) 让会话列表显示出来, 让好友列表进行隐藏
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function() {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/会话2.png)';
        tabFriend.style.backgroundImage = 'url(img/好友.png)'
        // b) 让好友列表显示, 让会话列表隐藏
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}
/*调用函数*/
initSwitchTab();


// 从服务器获取用户数据
function getUserInfo(){
    $.ajax({
        url:'/userInfo',
        type:'get',
        // body就是服务器返回的对象user
        success:function (body){
            if(body.userId&&body.userId>0){
                let userDiv=document.querySelector('.main .left .user');
                userDiv.innerHTML=body.username;
                userDiv.setAttribute("user-id",body.userId);
            }else {
                alert("当前用户未登录!")
                location.assign("login.html")
            }
        }
    });
}
getUserInfo();



function getFriendList(){
    $.ajax({
        url: 'friendList',
        type: 'get',
        success:function (body){
            //先将之前的好友列表清空，防止追加到后面,每次请求的时候都需要删除
            let friendListUL=document.querySelector('#friend-list')
            friendListUL.innerHTML="";
            //将服务器返回的结果加入到后面去，遍历body
            for (let friend of body)
            {
                let li=document.createElement("li");
                li.innerHTML='<h4>'+friend.friendName+'</h4>';
                // 记录friend的id以备后用
                li.setAttribute('friend-id',friend.friendId);
                friendListUL.appendChild(li);
                
                //给每个li标签加上点击事件，能够点击好友时展示会话
                li.onclick=function () {
                    clickFriend(friend);
                }
            }
        },
        error:function (){
            console.log('获取好友列表失败')
        }
    })
}
getFriendList();

function clickFriend(friend){
    // 在会话列表查找是否有对应会话
    let sessionLi=findSessionByName(friend.friendName);
    let sessionListUL=document.querySelector("#session-list");
    //  有的话就将该会话置顶
    if (sessionLi)
    {
        sessionListUL.insertBefore(sessionLi,sessionListUL.children[0])
        sessionLi.click();
    }
    else {
        // 如果不存在则创建新的会话
        sessionLi=document.createElement('li');
        sessionLi.innerHTML='<h3>'+friend.friendName+'</h3>' +'<p></p>';
        sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
        sessionLi.onclick=function () {
            clickSession(sessionLi);
        }
        sessionLi.click();
        createSession(friend.friendId,sessionLi);
    }
    // 将标签页切换到会话列表
    let tabSession=document.querySelector('.tab .tab-session');
    tabSession.click();
}

function createSession(friendId,sessionLi){
    $.ajax({
        url: 'session?toUserId='+friendId,
        type:'post',
        success:function (body) {
            console.log("会话创建成功! SessionID= "+body.sessionId);
            sessionLi.setAttribute("message-session-id",body.sessionId);
        },
        error:function () {
            console.log("会话创建失败!");
        }
    })
}

function findSessionByName(username){
    // 遍历会话列表，查找是否存在与name一致的标签
    let sessionLis=document.querySelectorAll('#session-list>li');
    for (let sessionLi of sessionLis) {
        let h3=sessionLi.querySelector('h3');
        if (h3.innerHTML==username)
        {
            return sessionLi;
        }
    }
    return null;
}


function getSessionList(){
    $.ajax({
        url: '/sessionList',
        type: 'get',
        success:function (body){
            // 清空原来的数据
            let sessionListUL=document.querySelector("#session-list");
            sessionListUL.innerHTML='';
            //遍历得到的数组
            for (let bodyElement of body) {
                //对lastMessage进行截取操作
                if (bodyElement.lastMessage.length>10)
                {
                    bodyElement.lastMessage=bodyElement.lastMessage.substring(0,10)+'.....';
                }
                let li=document.createElement("li");
                //将会话id保存到自定义的属性id中
                li.setAttribute('message-session-id',bodyElement.sessionId);
                li.innerHTML='<h3>'+bodyElement.friends[0].friendName+'</h3>'
                +'<p>'+bodyElement.lastMessage+'</p>';
                sessionListUL.appendChild(li);
                // 给li新增点击事件
                li.onclick=function (){
                    clickSession(li);
                }

            }
        }
    })
}

getSessionList();

function  clickSession(currenLi){
    //设置高亮区域,获得当前点击的是哪个li
    let allLi=document.querySelectorAll('#session-list>li');
    activeSession(allLi,currenLi);
    //获取历史消息
    let sessionId=currenLi.getAttribute('message-session-id');
    getHistoryMessage(sessionId);
}
function activeSession(allLi,currenLi){
    //未被选中就会取消设置的selected标签
    for (let allLiElement of allLi) {
        if (allLiElement==currenLi)
        {
            allLiElement.className='selected';
        }else {
            allLiElement.className='';
        }
    }
}
//获取历史消息
function getHistoryMessage(sessionId){
    console.log("sessionId= "+sessionId);
    //清空历史已有消息
    let messageShowDiv=document.querySelector('.right .message-show');
    messageShowDiv.innerHTML="";
    let titleDiv=document.querySelector('.right .title');
    titleDiv.innerHTML="";

    //重新设置会话标题，选中谁就线是谁，被选择的会话是被设置成selected的类
    let selectedH3=document.querySelector('#session-list .selected>h3');
    if (sessionId){
        //当sessionId存在的时候
        titleDiv.innerHTML=selectedH3.innerHTML;
    }
    $.ajax({
        url:'message?sessionId='+sessionId,
        type:'get',
        success:function (body){
            //返回对象为json类型的数组，里面的每一个元素都是一条消息
            //直接遍历
            for (let message of body) {
                addMessage(messageShowDiv, message);
            }
            //给滚动条加入自动滚动到最下面，使得能够展示最新消息
            //依赖scrollTo(水平方向的距离,垂直方向的距离)
            scrollBottom(messageShowDiv);
        }
    });

}

function addMessage(messageShowDiv,message){
    let messageDiv=document.createElement('div');
    //判断是否是自己发的消息
    //取出自己的用户名
    let selfUsername=document.querySelector('.left .user').innerHTML;
    if (selfUsername==message.fromName){
        //消息为自己发送的靠右,写css内名时不能加点
        messageDiv.className='message message-right';
    }else{
        //消息是别人发送的靠左
        messageDiv.className='message message-left';
    }
    messageDiv.innerHTML='<div class="box">'
                    +'<h4>'+message.fromName+'</h4>'
                    +'<p>'+message.content+'</p>'
                    +'</div>';
    messageShowDiv.appendChild(messageDiv);
}

function scrollBottom(elem){
    //messageShowDiv的距离由
    let clientHeight=elem.offsetHeight;
    //可滚动距离获取
    let scrollHeight=elem.scrollHeight;
    //需要滚动的距离为
    elem.scrollTo(0,scrollHeight-clientHeight);
}

let websocket=new WebSocket("ws://"+location.host+":8080/sendMessage")
websocket.onopen=function (){
    console.log("webSocket 连接成功")
}
websocket.onmessage=function (e){
    console.log("webSocket 接收到消息")
    let resp=JSON.parse(e.data);
    if (resp.type=='message'){
        handleMessage(resp);
    }else {
        console.log("不符合要求");
    }
}
function handleMessage(resp){
    //将客户端收到的消息，展示到界面中
    //1.聊天框区域
    //如果聊天的li标签不存在就创建，存在就遍历找到，根据sessionId找到对应的li标签
    let curSessionLi=findSessionLi(resp.sessionId);
    if (curSessionLi==null){
        //创建新的li
        curSessionLi=document.createElement('li');
        curSessionLi.setAttribute('message-session-id',resp.sessionId);
        curSessionLi.innerHTML='<h3>'+resp.fromName+'</h3>'+'<p></p>';
        //给这个li标签加上点击事件
        curSessionLi.onclick=function () {
            clickSession(curSessionLi);
        }

    }
    // 2.左侧消息预览区域，把新消息置顶，会话太长要截断
    //如果消息成为被选中的状态，就需要展示到会话展示区域
    //新增消息的同时，将滚动条放在下面的位置
    let p=curSessionLi.querySelector('p');
    p.innerHTML=resp.content;
    if (p.innerHTML.length>10)
    {
        p.innerHTML=p.innerHTML.substring(0,10)+'....';
    }
    let sessionListUL=document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi,sessionListUL.children[0]);

    //如果消息成为被选中的状态，就需要展示到会话展示区域
    if (curSessionLi.className=='selected')
    {
        let messageShowDiv=document.querySelector('.right .message-show');
        addMessage(messageShowDiv,resp);
        scrollBottom(messageShowDiv);
    }

}
function findSessionLi(targetSessionId)
{
    let AllSession=document.querySelectorAll('#session-list li');
    for (let li of AllSession) {
        let sessionId=li.getAttribute('message-session-id');
        if (sessionId==targetSessionId)
        {
            return li;
        }else {
            return null;
        }
    }
}
websocket.onerror=function (){
    console.log("webSocket  连接出错")
}
websocket.onclose=function (){
    console.log("webSocket 成功关闭");
}

//一下为实现消息的发送和接收逻辑
function initSendButton(){
    let sendButton=document.querySelector(".right .ctrl button");
    let messageInput=document.querySelector(".right .message-input");
    sendButton.onclick=function (){
        if(!messageInput.value){
            // 若输入框什么都没有就啥也不做
            return;
        }
    //获取当前被选中的li中的sessionId
        let selectedLi=document.querySelector(".left #session-list .selected");
        if (selectedLi==null){
            return;
        }
        let sessionId=selectedLi.getAttribute("message-session-id");
        //构造json数据
        let req={
            type:'message',
            sessionId:sessionId,
            content:messageInput.value
        };
        //通过websocket发送消息，但是req是json，需要转成string的类型
        req=JSON.stringify(req);
        websocket.send(req);
        //发送完成后要清空输入框的内容
        messageInput.value="";
    }

}
initSendButton();